<template>
  <div id="bottomLeft">
    <div class="bg-color-black">
      <div class="frame_box">
        <dv-border-box-11 class="frame" title="欢迎您 小22">
          <img :src=imgUrl class="phoneId">
        </dv-border-box-11>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      BASE_URL: '',
      imgUrl: '',
      userInfo: {},
    }
  },
  methods: {},
  mounted() {
    this.BASE_URL = process.env.VUE_APP_BASE_URL
    this.imgUrl = this.BASE_URL + "/video_feed"
  }
}
</script>

<style lang="scss">
$box-height: 98%;
$box-width: 100%;
#bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    height: $box-height - 98%;
    border-radius: 10px;

    .frame_box {
      display: flex;
      justify-content: center;

      .frame {
        width: 1080px;
        //height: 45%;
        height: 400px;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        position: relative;

        .phoneId {
          width: 96%;
          height: 85%;
          left: 2%;
          position: absolute;
          top: 12%;
          //border: 10px solid;
          display: block;
        }
      }
    }
  }

  .text {
    color: #c3cbde;
  }

  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;

    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
